<template>
  <div>
    <div>我是一级路由--登陆成功后数据</div>
    <template v-if="loginType === 'username'">
      <label>Username</label>
      <input placeholder="Enter your username" key="username-input"/>
    </template>
    <template v-else>
      <label>Email</label>
      <input placeholder="Enter your email address" key="email-input"/>
    </template>
    <div>
      <el-button @click="changeLoginType">切换登录状态</el-button>
    </div>
  </div>
  <div class="btn">
    <!-- <el-button plain @click="open">Common VNode</el-button> -->
    <el-button plain @click="open1">Dynamic props</el-button>
  </div>
</template>

<script setup lang="ts">
import { h, ref } from "vue";
import { ElMessageBox, ElSwitch } from "element-plus";
import { reactive, toRef, toRefs } from "vue";
import { getCurrentInstance } from "vue";
// proxy 就是当前组件实例，可以理解为组件级别的 this，没有全局的、路由、状态管理之类的
const { proxy, appContext } = getCurrentInstance();
// 这个 global 就是全局实例
const global = appContext.config.globalProperties;

console.log(proxy);
console.log(global);

let loginType = ref('username')
const data = reactive({
  statu: "1",
  count: 0,
  // loginType: "username"
});
/* // 这样虽然能拿到 statu / count，但是会变成普通变量，没有响应式效果了
const { statu, count } = data
 */
// 取出来一个响应式属性
// const statu = toRef(data, 'statu')

// 这样解构出来的所有属性都是有响应式的
let { statu, count } = toRefs(data);

const open1 = () => {
  const checked = ref<boolean | string | number>(false);
  ElMessageBox({
    title: "Message",
    // Should pass a function if VNode contains dynamic props
    message: () =>
      h(ElSwitch, {
        modelValue: checked.value,
        "onUpdate:modelValue": (val: boolean | string | number) => {
          checked.value = val;
        }
      })
  });
};
const changeLoginType = () => {
  console.log(loginType);
  loginType.value = loginType.value === 'username' ? 'email' : 'username'
}
</script>

<style scoped>
.btn {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>